<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿抖音</title>
    <meta name="referrer" content="no-referrer" />

    <!-- icon图标 -->
    <link rel="icon" href="./static/image/kkb.png">

    <!-- swiper插件 -->
    <link rel="stylesheet" href="./static/swiper/swiper-bundle.min.css">
    <script src="./static/swiper/swiper-bundle.min.js"></script>

    <!-- 全局样式 -->
    <link rel="stylesheet" href="./static/style.css">

    <!-- 弹性布局 -->
    <script src="./static/flexable.js"></script>

    <!-- Vue3.0 -->
    <script src="./static/vue.3.js"></script>
</head>

<body>
    <div id="app">
        <!-- 视频翻页 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="v in videos" @click="dublePlay(v.id,$event)">

                    <!-- 播放按钮 -->
                    <img v-show="!v.playing" class="play-btn" src="./static/image/play.png" alt="">

                    <!-- 头像 -->
                    <img :src="v.author" class="author" alt="" srcset="">

                    <!-- 获得赞的数量 -->
                    <div class="reward-num">
                        <img src="./static/image/active.png" alt="" srcset="">
                        <p>{{v.likenum}}</p>
                    </div>

                    <!-- 点赞出现的心 -->
                    <div class="hearts">
                        <img v-for="h in hearts" :key="h.id" :style="{left:h.x+'px',top:h.y+'px'}" src="./static/image/active.png" alt="">
                    </div>

                    <!-- 视频播放 -->
                    <video :id="'v-'+v.id" x5-video-player-fullscreen="true" webkit-playsinline="true"
                        x-webkit-airplay="true" playsinline="true" x5-playsinline :src="v.videoUrl"
                        :poster="v.poster">
                    </video>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <footer>
            <ul>
                <li>首页</li>
                <li>朋友</li>
                <li><img src="./static/image/kkb.png" alt=""></li>
                <li>消息</li>
                <li>我</li>
            </ul>
        </footer>
    </div>

    <!-- 获取数据 -->
    <script src="./static/data.js"></script>

    <script>
        // 获取距离屏幕左边的距离
        const screenW = document.querySelector('.swiper-container').offsetLeft;

        // 创建一个应用
        Vue.createApp({
            // 全局公共数据
            data: () => ({
                videos: VIDEOS, // 视频json
                lastIndex: 0,   // 最后的索引
                currentIndex: 0,// 当前的索引
                timer: null,    // 定时器
                db_start: 0,    // 点击开始
                hearts: []      // 图片数组
            }),
            // 方法
            methods: {
                // 点击播放
                playClick(id) {
                    this.videos.forEach(v => { // 遍历所有视频对象
                        if (v.id === id) { // 如果视频id等于目标id
                            // 如果视频正在播放则暂停，否则开始播放
                            if (v.playing) {
                                v.playing = false;
                                document.querySelector('#v-' + id).pause();
                            } else {
                                v.playing = true;
                                document.querySelector('#v-' + id).play();
                            }
                        }
                    })
                },
                switch() {
                    // 获取视频对象
                    document.querySelector('#v-' + this.lastIndex).pause();  // 暂停上一个视频
                    document.querySelector('#v-' + this.currentIndex).play();// 播放当前视频
                    // 修改播放状态
                    this.videos.forEach(v => {                   // 遍历所有视频对象
                        if (v.id === this.lastIndex) {           // 如果视频id和上一个视频id相等则暂停
                            v.playing = false;                   // 修改播放状态为假
                        } else if (v.id === this.currentIndex) { // 如果视频id和当前视频id相等则开始播放
                            v.playing = true;                    // 修改播放状态为真
                        }
                    });
                },
                // 双击小心心
                likes(e, id) {
                    let x = e.clientX - screenW - 40
                    let y = e.clientY - 40
                    this.hearts.push({
                        x,
                        y,
                        id: new Date().getTime()
                    })
                    if (this.hearts.length > 5) {
                        this.hearts.shift()
                    }
                    this.videos.forEach(v => {
                        if (v.id === id) {
                            v.likenum++
                        }
                    })

                },
                // 判断双击还是单击事件
                dublePlay(id, e) {
                    clearTimeout(this.timer)
                    this.timer = setTimeout(() => {
                        clearTimeout(this.timer)
                        this.playClick(id)
                        this.db_start = 0
                    }, 300)
                    if (this.db_start === 0) {
                        this.db_start = new Date().getTime()
                    } else {
                        let now = new Date().getTime()
                        let del = now - this.db_start
                        if (del <= 300) {
                            // 双击
                            clearTimeout(this.timer)
                            // 小心心
                            this.likes(e, id)
                        }
                        this.db_start = 0
                    }
                }
            },
            // 挂载阶段执行
            mounted() {
                let _self = this;// 定义自身对象

                // 初始化swiper
                var mySwiper = new Swiper('.swiper-container', {
                    direction: 'vertical', // 垂直切换选项
                    on: {
                        // 滑动结束后执行的事件
                        slideChangeTransitionEnd: function () {
                            _self.lastIndex    = _self.currentIndex; // 上一个索引赋值为当前索引
                            _self.currentIndex = this.activeIndex;   // 当前索引赋值为活动的索引
                            _self.switch();                          // 判断上一个暂停 当前播放
                        }
                    }
                });
            }
        }).mount('#app');
    </script>
</body>

</html>